<template>
  <div class="wrap">
    <up-navbar
      placeholder
      title="新增持有主体"
      @leftClick="backFn"
    />
    <div class="step">
      <up-steps active-color="#1890FF" current="2" inactive-color="#DEDFE2">
        <up-steps-item title="营业执照" />
        <up-steps-item title="银行证明材料" />
        <up-steps-item title="门店门头照片" />
        <up-steps-item>
          <template #desc>
            <div class="step_title">审核状态</div>
          </template>
        </up-steps-item>
      </up-steps>
    </div>
    <div class="box_info">
      <div class="box_title" style="display: flex"><div style="color: red">*</div>上传门店门头照片</div>
      <div class="sub_title">请上传清晰的门店内部照片和门头与门牌号照</div>
      <Upload :default-file="form.storePic" limit-count="6" limit-size="10" multiple update @file="form.storePic = $event" />
      <div class="tip">仅支持png、jpg、jpeg格式，请上传3-6个文件，每个文件小于10MB。</div>
    </div>
    <div :style="keepBottomSafeDis()" class="suction_bottom_btn">
      <Button :styles="{marginRight: '36rpx'}" size="N" type="solid" @confirm="btnBackFn">上一步</Button>
      <Button :disabled="!canSubmit" size="N" @confirm="submitReviewFn">提交审核</Button>
    </div>
    <!--  新增和完善资料审核提示弹窗  -->
    <u-popup :close-on-click-overlay="false" :show="showReviewTip" bg-color="transparent" mode="center" overlay-opacity="0.25">
      <Pconfirm :is-two-btn="false" confirm-text="我知道了" tip-title="提示" @confirm="confirmFn">
        <template #tip>
          <template v-if="form.isSelfEnterprise">
            <div>您的资料企业正在审核，请稍后查看~</div>
          </template>
          <template v-else>
            <div class="tip_content">还差一步，您的资料企业就可以审核了~</div>
            <div class="tip_content">请法人查看手机短信，点击链接完成企业认证</div>
          </template>
        </template>
      </Pconfirm>
    </u-popup>
    <!--  点击左上角返回提示  -->
    <u-popup :close-on-click-overlay="false" :show="showBackTip" bg-color="transparent" mode="center" overlay-opacity="0.25">
      <Pconfirm tip-text="您填写的资料尚未保存，是否退出填写?" tip-title="提示" @cancel="showBackTip = false" @confirm="confirmBackFn" />
    </u-popup>
  </div>
</template>
<script lang="ts" setup>
import Upload from '@C/Upload.vue'
import { computed, reactive, ref } from 'vue'
import { keepBottomSafeDis, onLoad, Router } from '@U/common'
import Button from '@C/Button.vue'
import { Msg, MsgLoading, PMsgLoadingClean } from '@C/Msg'
import Pconfirm from '@C/Pconfirm.vue'
import {
  getExternalEnterprisesInfo,
  updateThirdEnterpriseThirdStep,
} from './request'

const form = reactive({
  id: '',
  isSelfEnterprise: true,
  storePic: [],
  profileStatus: 0,
  coopStatus: 0,
})
// 获取外部其他企业信息
const getExternalEnterprisesInfoFn = async (id: string) => {
  const res = await getExternalEnterprisesInfo({ id }).finally(() => {})
  if (res?.code === 200) {
    form.id = res.data.id
    form.isSelfEnterprise = res.data.isSelfEnterprise
    form.storePic = res.data.storePic
    form.profileStatus = res.data.profileStatus
    form.coopStatus = res.data.coopStatus
  }
}
onLoad((option: any) => {
  if (option.id) {
    getExternalEnterprisesInfoFn(option.id)
  }
})
const canSubmit = computed(() => form.storePic?.length >= 3)
const showReviewTip = ref(false)
const submitReviewFn = async () => {
  if (form.storePic.length < 3) return Msg({ msg: '门店门头至少上传3张图片' })
  if (!canSubmit.value) return
  await MsgLoading('提交中')
  const res = await updateThirdEnterpriseThirdStep(form).finally(() => {})
  if (res?.code === 200) {
    PMsgLoadingClean()
    showReviewTip.value = true
  }
}
const confirmFn = () => {
  showReviewTip.value = false
  Router.back(2)
}
const showBackTip = ref(false)
let backName = ''
const backFn = () => {
  backName = 'arrowBack'
  showBackTip.value = true
}
const btnBackFn = () => {
  backName = 'btnBack'
  showBackTip.value = true
}
const confirmBackFn = () => {
  showBackTip.value = false
  if (backName === 'arrowBack') return Router.back(2)
  if (backName === 'btnBack') return Router.back()
}
</script>

<style lang="less" scoped>
.wrap {
  /deep/ .u-steps {
    display: flex;
  }
  .step {
    padding: 28rpx 0;
    margin-top: 2rpx;
    background-color: #fff;
    .step_title {
      font-size: 24rpx;
      line-height: 20px;
      color: #DEDFE2;
    }
    /deep/ .u-steps-item__wrapper__circle {
      width: 52rpx;
      height: 52rpx;
      border-radius: 50%;
    }
    /deep/ .u-steps-item__wrapper--row {
      width: auto;
    }
    /deep/ .u-text__value {
      font-size: 24rpx !important;
    }
    /deep/ .u-text__value--main {
      color: #1890FF;
    }
  }
  .box_info {
    background: #FFFFFF;
    padding: 20rpx 40rpx 45rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    .box_title {
      font-size: 32rpx;
      font-weight: 500;
      color: rgba(0,0,0,0.85);
      line-height: 44rpx;
    }
    .sub_title {
      font-weight: 400;
      font-size: 28rpx;
      color: rgba(0,0,0,0.45);
      line-height: 20px;
      margin: 12rpx 0 40rpx;
    }
    .tip {
      font-size: 24rpx;
      color: #8c8c8c;
    }
  }
  .tip_content {
    font-weight: 400;
    text-align: left;
    color: rgba(0,0,0,0.85);
    line-height: 40rpx;
    padding: 0 24rpx 0 26rpx;
  }
}
</style>
